<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <babyselect ref="babyselect" @get="getSubForm"/>
      <div class="head-container">
        <strong>宝贝设置</strong>
        <el-divider/>
      </div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="选择宝贝：" prop="select">
          <el-button v-if="goodsArr.length===0" type="text" icon="el-icon-circle-plus" @click="clicks"> 添加宝贝</el-button>
          <div v-else style="width: 300px;">
            <el-row v-for="item in goodsArr" :key="item.commodity_id" type="flex" justify="space-between">
              <div>
                <el-image
                  :src="item.cover_url"
                  fit="cover"
                  style="width: 40px; height: 40px">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"/>
                  </div>
                </el-image>
              </div>
              <div style="width: 60%;">
                <div :title="item.name" class="spanOneLine">{{ item.name }}</div>
              </div>
              <div>
                <el-button type="primary" size="mini" @click="dataInit">删除</el-button>
              </div>
            </el-row>
          </div>
        </el-form-item>
        <div class="head-container">
          <strong>积分设置</strong>
          <el-divider/>
        </div>
        <el-form-item label="购买积分：" class="spot" prop="score_type">
          <el-radio-group v-model="ruleForm.score_type">
            <el-radio :label="0" style="width: 100%; margin-bottom: 10px;">
              商品销售价同等价格积分购买
            </el-radio>
            <el-radio :label="1">
              指定
              <el-input v-model="ruleForm.sell_score" size="small" style="width: 100px;margin: 0 10px;"/>
              积分购买
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="saveBtn">
          <el-button size="small" @click="back()">取消</el-button>
          <el-button :loading="addLoading" type="primary" size="small" @click="onsubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Babyselect from './babyselect'
import { editScoreCommodity } from '@/api/mall/pointsmall'
export default {
  components: { Babyselect },
  data() {
    return {
      goodsArr: [], // 选中的宝贝
      value: '',
      ruleForm: {
        select: '',
        commodity_id: '',
        is_score_commodity: 1,
        score_type: 0,
        sell_score: 0
      },
      addLoading: false,
      rules: {
        select: [{ required: true, message: '请选择宝贝', trigger: 'blur' }],
        score_type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  created() {
    const info = this.$route.query.info
    if (info !== undefined) {
      this.ruleForm = info
      this.goodsArr.push(info)
    }
  },
  methods: {
    clicks() {
      this.$refs.babyselect.doadd = true
    },
    getSubForm(res) {
      this.goodsArr.push(res)
      this.ruleForm.commodity_id = res.commodity_id
      this.ruleForm.select = this.ruleForm.commodity_id
    },
    dataInit() {
      this.goodsArr = []
      this.ruleForm.commodity_id = ''
      this.ruleForm.select = ''
    },
    back() {
      this.$router.push({ path: '/commodity/pointsmalllist' })
    },
    onsubmit() {
      if (this.ruleForm.score_type === 1 && this.ruleForm.sell_score < 1) {
        this.$message({
          message: '指定积分购买，积分不允许为零',
          type: 'warning' })
        return
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.addLoading = true
          // 最终提交
          editScoreCommodity(this.ruleForm).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success' })
            this.addLoading = false
            this.$router.push({ path: '/commodity/pointsmalllist' })
          }).catch(() => {
            this.addLoading = false
          })
        }
      })
    }
  }
}
</script>
<style>
  .spot {
      width: 600px;
  }

  .saveBtn{
    width: 60%;
    display: flex;
    justify-content: center;
  }
  .spanOneLine {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  /* .el-dialog__wrapper {
    z-index: 20000 !important;
  } */
  .disabled .el-upload--picture-card {
    display: none;
  }
</style>
